<template>
    <div>
        <el-row :gutter="10" class="mb8" style="border-bottom:1px solid #02A7F0;padding-bottom:5px;">
            <el-col>
                <span style="color:#02A7F0;font-size:18px;display:inline-block;padding-top:2px;"><b>合同基础信息</b></span>
                <div style="float:right;">
                    <el-button
                        type="success"
                        plain
                        icon="el-icon-back"
                        size="mini"
                        @click="backForm"
                        >返回</el-button>
                </div>
            </el-col>
        </el-row>
        <el-form ref="form" :model="form" label-width="120px" disabled>
            <el-row>
                <el-col :span="18">
                    <el-form-item label="客户名称">
                        <el-input v-model="form.customerName"/>
                    </el-form-item>
                </el-col>
                <el-col :span="6"> 
                </el-col>
                
                <el-col :span="18">
                    <el-form-item label="付款方式">
                        <el-select v-model="form.paymentType" style="width:100%">
                            <el-option
                                v-for="dict in paymentTypeOptions"
                                :key="dict.dictValue"
                                :label="dict.dictLabel"
                                :value="dict.dictValue"
                                />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                </el-col>
                
                <el-col :span="9">
                    <el-form-item label="合同编号">
                        <el-input v-model="form.contractNo"/>
                    </el-form-item>
                </el-col>
                <el-col :span="9">
                    <el-form-item label="负责人">
                        <el-input v-model="form.director"/>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                </el-col>

                <el-col :span="9">
                    <el-form-item label="交货日期">
                        <el-date-picker clearable size="small"
                            v-model="form.deliveryDate"
                            type="date"
                            value-format="yyyy-MM-dd" style="width:100%">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="9">
                    <el-form-item label="合同金额">
                        <el-input v-model="form.contractSum.toLocaleString()" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                </el-col>
            </el-row>
        </el-form>
        
    </div>

</template>
<script>
import { getContractDetail} from "@/api/business/contract"; 

export default {
    name: 'ContractSimpleDetail',
    props: {
        editConfig: { type: Object, default: () => ({}) }
    },
    data() {
        return {
            form: { 
                customerId:'',
                customerName:'',
                paymentType:'',
                contractNo: '',
                director: '',
                deliveryDate: '',
                contractSum: '',
            },
            id: '',
            paymentTypeOptions: []
        }
    },
    created() {
        this.getDicts("bus_payment_type").then(response => {
            this.paymentTypeOptions = response.data;
        });
    },  
    mounted(){
        this.id = this.editConfig.id
        this.getContractDetailInfo()
    },
    methods: {
        backForm(){
            this.$emit('onDetailBack', false)
        },
        getContractDetailInfo(){
            getContractDetail(this.id).then(response => {
                this.form = response.data
            });
        },
    }
}
</script>

<style scoped>
.el-form-item {
    margin-bottom: 5px;
}
</style>
